<!--
* @description 属性展示图
* @fileName attr.vue
* @author huangyu
* @date 2022/06/02 15:28:59
!-->
<template>
    <div class="iconAttrPre" :style="{height:menuHeight+'px'}" v-if="attr&&!(JSON.stringify(attr)=='{}')">
        <!-- {{attr}} -->
        <el-row>
            <el-col :span="6">生命力：</el-col>
            <el-col :span="18">{{attr.hp}}</el-col>
        </el-row>
        <el-row>
            <el-col :span="6">攻击力：</el-col>
            <el-col :span="6">
                <el-tooltip placement="bottom" effect="light">
                    <div slot="content">
                        {{attr.wuqiZHurtCount}} ({{attr.wuqiZ.hurt}}<span class="color_success">{{attr.wuqiZ.hurtlv?'+'+attr.wuqiZ.hurtlv:''}}</span>)
                    </div>
                    <strong>{{attr.wuqiZHurtCount}}</strong>
                </el-tooltip>
            </el-col>
            <el-col :span="6" v-if="attr.wuqiYHurtCount>0">攻击力：</el-col>
            <el-col :span="6" v-if="attr.wuqiYHurtCount>0">
                <el-tooltip placement="bottom" effect="light">
                    <div slot="content">
                        {{attr.wuqiYHurtCount}} ({{attr.wuqiY.hurt}}<span class="color_success">{{attr.wuqiY.hurtlv?'+'+attr.wuqiY.hurtlv:''}}</span>)
                    </div>
                    <strong>{{attr.wuqiYHurtCount}}</strong>
                </el-tooltip>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">致命：</el-col>
            <el-col :span="6">
                <el-tooltip placement="bottom" effect="light">
                    <strong>{{attr.wuqiZ.wlzm}}</strong>
                </el-tooltip>
            </el-col>
            <el-col :span="6" v-if="attr.wuqiYHurtCount>0">致命：</el-col>
            <el-col :span="6" v-if="attr.wuqiYHurtCount>0">
                <strong>{{attr.wuqiY.wlzm}}</strong>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">魔法增幅力：</el-col>
            <el-col :span="6">{{attr.mfzfl}}</el-col>
        </el-row>
        <!-- {{attr}} -->
    </div>
</template>

<script>
export default {
    components: {},
    props:{
        attr:{}
    },
    data() {
        return {
            menuHeight: document.documentElement.clientHeight,
        }
    },
    mounted() {

    },
    methods: {

    },
    // watch:{
    //     attr(val){
    //         console.log(val)
    //     },
    // }
}
</script>

<style scoped>
</style>